<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Item Detail</title>
    <style>
        thead,
        tfoot {
            background-color: #3f87a6;
            color: #fff;
        }

        tbody {
            background-color: #e4f0f5;
        }

        caption {
            padding: 10px;
            caption-side: bottom;
        }

        table {
            border-collapse: collapse;
            border: 2px solid rgb(200, 200, 200);
            letter-spacing: 1px;
            font-family: sans-serif;
            font-size: 0.8rem;
        }

        td,
        th {
            border: 1px solid rgb(190, 190, 190);
            padding: 5px 10px;
        }

        td {
            text-align: center;
        }

        #attributes {
            text-align: left;
            white-space: pre;
        }
    </style>
</head>
<body>
<table>
    <thead>
    <tr>
        <th>Field</th>
        <th scope="col">Content</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <th scope="row">Name</th>
        <td th:text="${item.name}"></td>
    </tr>
    <tr th:if="${item.namespace != null}">
        <th scope="row">Namespace</th>
        <td th:text="${item.namespace}"></td>
    </tr>
    <tr th:if="${item.order != null}">
        <th scope="row">Order</th>
        <td th:text="${item.order}"></td>
    </tr>
    <tr th:if="${item.attributes != null}">
        <th scope="row">Attributes</th>
        <td id="attributes" th:text="${item.attributes}"></td>
    </tr>
    <tr th:if="${item.value != null}">
        <th scope="row">Value</th>
        <td th:text="${item.value}"></td>
    </tr>
    </tbody>
</table>
</body>

</html>